<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
    <script src="../../scripts/jquery-1.11.3.min.js"></script>
    <script src="../../scripts/lib/echarts-2.2.7/esl.js"></script>
    <script src="../../scripts/lib/echarts-2.2.7/echarts.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="chart1" style="height:100%;width:100%;"></div>
<!-- ECharts单文件引入 -->


<script type="text/javascript">
$(function() {

    // 路径配置
    require.config({
        paths: {
            echarts: '../../scripts/lib/echarts-2.2.7'
        }
    });

    require(
        [
            'echarts',
			'echarts/chart/bar',
            'echarts/chart/line' // 使用柱状图就加载bar模块，按需加载
        ],
        function(ec) {
            // 基于准备好的dom，初始化echarts图表
            var myChart = ec.init(document.getElementById('chart1'));
			
			option = {
				tooltip : {
					trigger: 'axis',
				},
				toolbox: {
					show : false,
					feature : {
						mark : {show: true},
						dataView : {show: true, readOnly: false},
						magicType: {show: true, type: ['line', 'bar']},
						restore : {show: true},
						saveAsImage : {show: true}
					}
				},
				calculable : true,
				legend: {
					data:['伤害人次','构成比例']
				},
				xAxis : [
					{
						type : 'category',
						data : ['轻度','中度','重度','未说明']
					}
				],
				yAxis : [
					{
						type : 'value',
						name : '人次',
						axisLabel : {
							formatter: '{value} 人'
						}
					},
					{
						type : 'value',
						name : '比例',
						axisLabel : {
							formatter: '{value} %'
						}
					}
				],
				series : [
			
					{
						name:'伤害人次',
						type:'bar',
						data:[7614, 2083, 177, 3],
						barWidth: 30
					},
					{
						name:'构成比例',
						type:'line',
						yAxisIndex: 1,
						data:[77.09, 21.09, 1.79, 0.03],
						barWidth: 30
					}
				]
			};
								
			
            // 为echarts对象加载数据 
            myChart.setOption(option);
			window.onresize = myChart.resize
        }
    );

})
</script>
</body>
</html>

